<template>
  <div id="customer-travel-policies">
    <div class="row">
      <div class="col-10 offset-1">
        <ul class="nav nav-tabs nav-bordered mb-3" id="myTravelTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="hotel-tab" data-bs-toggle="tab" href="#hotelInfo">酒店政策</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="flight-tab" data-bs-toggle="tab" href="#flightInfo">机票政策</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="train-tab" data-bs-toggle="tab" href="#trainInfo">火车票政策</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="car-tab" data-bs-toggle="tab" href="#carInfo">用车政策</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="hotelInfo">
            <tp-hotel :customerId="customerId"></tp-hotel>
          </div>
          <div class="tab-pane fade show" id="flightInfo">
            <tp-flight :customerId="customerId"></tp-flight>
          </div>
          <div class="tab-pane fade show" id="trainInfo">
            <tp-train :customerId="customerId"></tp-train>
          </div>
          <div class="tab-pane fade show" id="carInfo">
            <tp-car :customerId="customerId"></tp-car>
          </div>
        </div>
       
      </div>
    </div>  
  </div>
</template>

<script>
  import TpHotel from './travel-policies/tp-hotel.vue'
  import TpFlight from './travel-policies/tp-flight.vue'
  import TpTrain from './travel-policies/tp-train.vue'
  import TpCar from './travel-policies/tp-car.vue'

  export default {
    components: {
      TpHotel,
      TpFlight,
      TpTrain,
      TpCar
    },
    props: {
      customerId: {
        type: Number
      }
    }
  }
</script>